<template>
  <div class="app-box">
    <div class="main-box">
      <!--      <div class="login-left">-->
      <!--        右边-->
      <!--      </div>-->
      <div class="login-right">
        <div class="form-box">
          <header class="login-header">
            <div class="login-title" v-if="formType==0">登录</div>
            <div class="login-title" v-if="formType==1">注册</div>
            <div class="login-title" v-if="formType==3">忘记密码</div>
            <div>
              <div v-if="formType==0">
                <span>没有账号？</span>
                <span class="a-login" @click="regForm">点击注册</span>
              </div>
              <div v-if="formType==1">
                <span>已有账号？</span>
                <span class="a-login" @click="passForm">点击登录</span>
              </div>
              <div v-if="formType==3">
                <!--                <span>已有账号？</span>-->
                <span class="a-login" @click="passForm">立即登录</span>
              </div>
            </div>
          </header>
          <!-- 登录-->
          <div v-if="formType==0">
            <!--账号密码登录-->
            <el-form v-if="type==0" ref="form" :model="loginPassword">
              <el-form-item>
                <el-input v-model="loginPassword.phoneNumber" placeholder="请输入登录账号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="loginPassword.password" placeholder="请输入登录密码"
                          @keyup.enter.native="passwordLoginbtn"
                          type="password"></el-input>
              </el-form-item>
            </el-form>
            <!-- 手机号验证码登录-->
            <el-form v-if="type==1" ref="form" :model="loginPhone">
              <el-form-item>
                <el-input v-model="loginPhone.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="15">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="loginPhone.code"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" style="width: 100%;height: 100%;background-color: white;color: #409EFF"
                                 @click="phoneCode"
                                 :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒重新获取` : '获取验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <div class="login-footer">
              <div class="a-login" @click="forgerPass">忘记密码？</div>
              <div class="a-login" @click="messageLogin" v-if="type==0">短信验证登录</div>
              <div class="a-login" @click="passworLogin" v-if="type==1">账号密码登录</div>
            </div>
            <!--账号-->
            <div class="login-btn-box" v-if="type==0">
              <div class="login-btn" @click="passwordLoginbtn" style="background-color: cornflowerblue">立即登录</div>
            </div>
            <!-- 手机号-->
            <div class="login-btn-box" v-if="type==1">
              <div class="login-btn" @click="phoneLoginbtn" style="background-color: cornflowerblue">立即登录</div>
            </div>
          </div>
          <div v-if="formType==1">
            <el-form :model="registerList" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="" prop="password">
                <el-input v-model="registerList.password" placeholder="密码" type="password"></el-input>
              </el-form-item>
              <el-form-item label="" prop="passwordReg">
                <el-input v-model="registerList.passwordReg" placeholder="再次输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item abel="" prop="phoneNumber">
                <el-input v-model="registerList.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item l>
                <el-row>
                  <el-col :span="15">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="registerList.code"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" style="width: 100%;height: 100%;background-color: white;color: #409EFF"
                                 @click="regCode"
                                 :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒重新获取` : '获取验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <div class="login-btn-box">
              <div class="login-btn" @click="regBtn" style="background-color: cornflowerblue">立即注册</div>
            </div>
          </div>
          <div v-if="formType==3">
            <el-form ref="form" :model="forgetList">
              <el-form-item>
                <el-input v-model="forgetList.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="16">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="forgetList.code"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" plain @click="forgetCode" style="width: 100%"
                                 :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒重新获取` : '获取验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-input v-model="forgetList.password" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="forgetList.passwordGet" type="password" placeholder="请确认密码"></el-input>
              </el-form-item>
            </el-form>

            <div class="login-btn-box">
              <div class="login-btn" @click="changePassword" style="background-color: cornflowerblue">确认修改</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {changePassword, getCode, login, personal, reg} from "@/api/login";

export default {
  name: "indexLogin",
  data() {
    return {
      forgetList: {},
      // 倒计时
      countdown: 60,
      // 获取验证码
      isCountingDown: false,
      // 登录类型
      type: 0,
      formType: 0,
      loginPassword: {},
      registerList: {
        passwordReg: '',
        // nickName: '',
        phoneNumber: '',
        password: "",
        // nickname: '',
        code: ''
      },
      loginPhone: {
        phoneNumber: '',
        code: ''
      },
    }
  },
  methods: {
    // 忘记密码
    forgerPass() {
      this.formType = 3
    },
    // 判断 登录 注册
    regForm() {
      this.formType = 1
    },
    passForm() {
      this.formType = 0
    },
    messageLogin() {
      this.type = 1;
    },
    passworLogin() {
      this.type = 0
    },
    // 确认修改
    changePassword() {
      changePassword(this.forgetList).then(res => {
        if (res.code == 200) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">修改成功！</strong>',
            type: 'success'
          });
          this.dialogForget = false
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    // 注册账号
    regBtn() {
      // 静态判断两次密码
      if (this.registerList.password === this.registerList.passwordReg) {
        let obj = {
          code: this.registerList.code,
          phoneNumber: this.registerList.phoneNumber,
          password: this.registerList.password,
        }
        // 点击注册时验证码校验
        reg(obj).then((res) => {
          if (res.code == 200) {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">恭喜你，注册成功！</strong>',
              type: 'success'
            });
            //   token res.token
            this.dialogRegister = false
            // 存储token 更改登录状态
            this.$store.commit('settingToken', res.token)
            this.$store.commit('changeisLogin', res.code)
            setTimeout(function () {
              personal().then(res => {
                console.log(res)
              })
            }, 1000)
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'error'
            });
          }
        })
      } else {
        window.alert("两次密码不同！")
      }
    },
    // 忘记密码获取code
    forgetCode() {
      this.getMessage(this.forgetList.phoneNumber)
    },
    // 注册获取验证码
    regCode() {
      this.getMessage(this.registerList.phoneNumber)
    },
    // 手机号登录
    phoneLoginbtn() {
      login(this.loginPhone).then(res => {
        if (res.code == 200) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">恭喜你，登陆成功！</strong>',
            type: 'success'
          });

          this.loginlogVisible = false
          this.$store.commit('settingToken', res.token)
          this.$store.commit('changeisLogin', res.code)
          this.getPersonal()
          this.$router.push({
            path: '/',
          })
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">账号/验证码存在错误！</strong>',
            type: 'error'
          });
        }
      })
    },
    // 账号密码登录
    async passwordLoginbtn() {
      await login(this.loginPassword).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'success'
          });
          this.$store.commit('settingToken', res.token)
          this.$store.commit('changeisLogin', res.code)
          this.getPersonal()
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    phoneCode() {
      this.getMessage(this.loginPhone.phoneNumber)
    },
    // 获取验证码通用
    getMessage(data) {
      if (!this.isCountingDown) {
        // 发送验证码的逻辑
        getCode(data).then(res => {
          if (res.code == 200) {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'error'
            });
          }
        })
        this.isCountingDown = true;
        this.startCountdown();
      }
    },
    // 获取个人信息
    async getPersonal() {
      await personal().then(res => {
        console.log(res, '个人信息code')
        if (res.code == 200) {
          let userinfo = JSON.stringify(res.data)
          this.$store.commit('changeUserInfo', userinfo)
          // 登录状态存储
          // this.$store.commit('changeisLogin', res.code)
          this.userinfoList = JSON.parse(localStorage.getItem("userInfo"));
          let that = this
          setTimeout(() => {
            that.$router.push({
              path: '/',
            })
          })
        } else {
          let that = this
          setTimeout(() => {
            that.$router.push({
              path: '/',
            })
          })
          // this.$store.commit('changeisLogin', res.code)
          this.userinfoList = JSON.parse(localStorage.getItem("userInfo"));
        }
      })
    },
    // 倒计时函数
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          this.isCountingDown = false;
          this.countdown = 60;
        }
      }, 1000);
    },
  }
}
</script>

<style scoped>
.app-box {
  min-height: 100%;
  background: cornflowerblue url(https://img.bosszhipin.com/static/file/2022/zlqc2m9fao1667185843533.png) bottom / 100% auto no-repeat;
}


.main-box {
  margin: 0 auto;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;

  .login-right {
    background-color: white;
    width: 45%;
    box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .1);
  }
}

.login-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .login-title {
    font-size: 26px;
    font-weight: 700;
  }
}

.a-login {
  text-decoration: none;
  cursor: pointer;
  color: #005980
}

.form-box {
  padding: 64px 70px 48px;
}

.login-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.login-btn-box {
  margin-top: 20px;
  /* width: 750rpx; */
  /* position: absolute;
  bottom: 129rpx;
  left: 0;
  width: 750rpx;
  padding: 50rpx 68rpx 0rpx; */
}

.login-btn {
  height: 50px;
  border-radius: 41px;
  background-color: #12C8B9;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

::v-deep .el-input__inner {
  margin-bottom: 20px !important;
}

@media screen and (max-width: 1000px) {
  .form-box {
    padding: 20px 10px;
    width: 90vw;
  }

  .main-box {
    margin: 0 auto;
    width: 90vw;
    height: 50vh;
    padding-top: 100px;

    .login-right {
      background-color: white;
      width: 90vw;
      box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .1);
      padding-right: 20px;
      border-radius: 10px;
    }
  }

  .login-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .login-title {
      font-size: 26px;
      font-weight: 700;
    }
  }
}
</style>